<style lang='scss' scoped>
  @import '~assets/common/css/mixin.scss';
  .page {
    background: #fff;
    height: 100%;
    .pay-success {
      @include flexbox(flex-start,
      space-between,
      column,
      wrap);
      .success-info {
        background: #FF9933;
        color: #ffffff;
        text-align: center;
        padding: 100px 0; 
        // padding: 50px 0 30px 0;
        .info {
          font-size: 18px;
          padding-bottom: 3vw;
          i {
            color: #ffffff;
            font-size: 48px;
          }
        }
        .order {
          color: #FF9933;
          margin-top: 6vw;
          border-radius: 10px;
          background: #fff;
          line-height: 40px;
          width: 100px;
          height: 36px;
          font-size: 18px;
        }
        .info-tip {
          font-size: 18px;
        }
        .tip {
          font-size: 14px;
        }
      }
      .share {
        text-align: center;
        padding: 30px 10px;
        background: #ffffff;
        .title {
          position: relative;
          font-size: 18px;
          padding-bottom: 20px;
          .text {
            position: absolute;
            left: 100px;
            z-index: 100;
            display: inline-block;
            background: #ffffff;
            width: 100px;
          }
          .line {
            position: absolute;
            top: 10px;
            left: 50px;
            width: 200px;
            height: 1px;
            border-bottom: 1px solid #333;
          }
        }
        .content {
          line-height: 30px;
          .gray {
            color: $gray;
          }
        }
      }
      .app {
        @include flexbox(center,
        center,
        row,
        nowrap);
        text-align: center;
        >div {
          @include flexbox(center,
          center,
          column,
          nowrap);
          i {
            color: #BFBFBF;
            font-size: 40px;
          }
          button {
            margin-top: 40px;

            padding: 10px;
          }
        }
      }
    }
  }

</style>
<!-- order -->
<template>
  <div class="page">
    <div class="my-header">
      <i class="back"></i>
      <strong>支付成功</strong>
      <i class="record" @click="$router.push({name:'order',query:{tab:0}})">订单</i>
    </div>
    <div class="pay-success">
      <div class="success-info">
        <div class="info">
          <i class="icon-select iconfont"></i>
        </div>
        <div class="info-tip">支付成功</div>
        <button class="order" @click="$router.push({name:'order',query:{tab:0}})">查看订单</button>
      </div>
      <!--<div class="share">
        <div class="title">
          <div class="text">分享有礼</div>
          <i class="line"></i></div>
        <div class="content">
          <p>1、添加下面客服微信号； </p>
          <p> 2、咨询客服即可获得<span style="font-size:24px;color:red"> 8.8 </span>元现金红包奖励。 </p>
          <p><img src="~assets/common/images/qrcode.jpg" style="width:120px;" alt=""></p>
          <p class="gray">1、长按识别二维码添加客服微信 </p>
          <p class="gray"> 2、或将图片保存至相册，微信扫一扫添加客服微信 </p>
        </div>
      </div>-->
      <!--<div class="app">
            <div class="ios">
               <i class="iconfont icon-ios"></i>
               <a href="https://itunes.apple.com/cn/app/激想云商/id1129712764?mt=8">
                  <mt-button type="primary" size="small">IOS下载</mt-button>
               </a>
            </div>
            <div class="Android">
               <i class="iconfont icon-anzhuologo"></i>
               <a href="https://www.pgyer.com/c708">
                  <mt-button type="primary" size="small">安卓下载</mt-button>
               </a>
            </div>
         </div>-->
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {}
    },

    watch: {},

    components: {},

    computed: {},

    methods: {},

    mounted() {}
  }

</script>
